<template>
  <el-row style="margin:15px">
    <el-col :span="16">
       <div class="bor" :class="borShow=='brand'?'':'hide'"></div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       
        <el-tab-pane label="品牌区" name="brand">
          <brandArea v-if="activeName=='brand'" />
        </el-tab-pane>
        <el-tab-pane label="车系区" name="carSeries">
           <carModel v-if="activeName=='carSeries'" />
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
  import brandArea from './components/brandArea'
  import carModel from './components/carModel'

  export default {
    components: {
      brandArea,
      carModel
    },
    data(){
      return {
        activeName:'brand',
        borShow:'brand'
      }
    },
    methods: {
      handleClick(data){
        this.borShow=data.name
      }
    }
  }
</script>

<style lang="scss" scoped>
  .table{
    border:1px solid #F5F6FA;
  }
  .bor{
    height: 20px;
    position: absolute;
    left: 0;
    top: 3px;
    border-left:1px solid #3B86FF;
    z-index: 99;
    display: block;
  }
  .hide{
    display: none
  }
  /deep/ .el-table th{
    background: #F5F6FA 
  }
  /deep/ .el-table::before{
    height: 0;
  }
  /deep/ .el-tabs__item{
    height: 24px;
    line-height: 24px;
  }
  /deep/ .el-tabs__item.is-active{
    border:1px solid  #3B86FF;
    color:#3B86FF;
    border-radius: 4px 0 0 4px;
    
  }
  /deep/ .el-table .cell{
    display: flex;
  }

  /deep/ .el-tabs--card > .el-tabs__header{
    border-bottom: 0;
    border-left: 0;
  }
  /deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav{
    height: 25px;
    border: 0;
    border: 1px solid #E4E7ED;
    border-radius: 4px;
  }
  /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active{
    border-bottom-color:#3B86FF;
    
  }

  .handle{
    display: flex
  }
  /deep/ .el-table td div{
    display: flex;
    justify-content: flex-start;
    align-items: center
  }
  </style>